<!--  -->
<template>
  <div>
    <div class="cont">
      <div class="banner" v-if="cate_banner">
        <img class="banner-img" :src="cate_banner | imgSrc" alt="" />
      </div>
      <!-- 标题 -->
      <div
        style="
          font-weight: bold;
          font-size: 24px;
          color: #222222;
          width: 100%;
          margin-top: 24px;
        "
      >
        {{ $t("首页.联名名称") }}
      </div>
      <div class="search">
        <img src="@/assets/images/home/search.png" alt="" />
        <input
          type="text"
          :placeholder="$t('首页.请输入搜索内容')"
          v-model="search_text"
        />
        <button class="btnsearch" @click="getCatGoodsReq(false)">
          {{ $t("首页.搜索") }}
        </button>
      </div>
      <div class="choiceness">
        <div class="nav">
          <p class="one-category">{{ cat_res.name }}</p>
          <ul class="two-category">
            <li
              class="two-sub-category"
              v-for="(item, _) in cat_two_list"
              :key="item.id"
            >
              {{ item.name }}
            </li>
          </ul>
          <hr style="margin-top: 20px" />
          <el-menu
            default-active="1-"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            style="border: 0px"
          >
            <el-submenu
              v-for="(item1, _) in cat_two_list"
              :key="item1.id"
              :index="item1.id + ''"
            >
              <template slot="title">
                <span>{{ item1.name }}</span>
              </template>
              <el-checkbox-group v-model="checkList">
                <el-col
                  class="col"
                  v-for="(item2, _) in item1.children"
                  :key="item2.id"
                >
                  <el-checkbox
                    :label="item2.id"
                    @change="checkBoxChange($event, item2)"
                    >{{ item2.name }}</el-checkbox
                  >
                </el-col>
              </el-checkbox-group>
            </el-submenu>
          </el-menu>
        </div>
        <div
          class="navdetails infinite-list"
          v-infinite-scroll="load"
          style="overflow: auto"
        >
          <div
            class="item"
            v-for="(item, index) in goods_list"
            :key="index"
            @click="toGoodsDetail(item)"
          >
            <el-image
              class="cover"
              :src="item.thumbnail | imgSrc"
              alt=""
              fit="contain"
            ></el-image>
            <p style="margin: 20px 0">{{ item.title }}</p>
            <p>{{ $t("公共.货币符号") }}{{ item.price }}</p>
          </div>
          <el-empty class="empty" v-if="goods_list.length == 0"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCatRes, getCatGoods } from "@/utils/api.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      search_text: "",
      cat_id: "",
      checkList: [],
      cat_res: {},
      cat_two_list: [],
      goods_list: [],
      show: true,
      cate_banner: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        this.cat_id = to.query.id || "";
        this.search_text = to.params.searchKey || "";
        this.getCatRes();
      },
    },
  },
  mounted() {
    this.getCatGoodsReq();
  },
  //方法集合
  methods: {
    getCatRes() {
      getCatRes({ one_cat_id: this.cat_id }).then((res) => {
        if (res.code == 1) {
          this.cate_banner = res.data.cat_banner;
          this.cat_res = res.data.cat_res;
          this.cat_two_list = res.data.cat_two_res;
          this.getCatGoodsReq(false);
        }
      });
    },
    getCatGoodsReq(next = false) {
      getCatGoods({
        one_cat_id: this.cat_id,
        two_category_id: "",
        category_id: this.checkList.join(","),
        title: this.search_text,
      }).then((res) => {
        if (res.code == 1) {
          if (this.goods_list.length == 0 || !next) {
            this.goods_list = res.data.data;
          } else {
            this.goods_list = this.goods_list.concat(res.data.data);
          }
        }
      });
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    checkBoxChange(e) {
      this.getCatGoodsReq(false);
    },
    load() {
      console.log("加载新数据...");
    },
    toGoodsDetail(item) {
      if (this.cat_res.is_design == 1) {
        this.$router.push({
          name: "customization",
          query: {
            goods_id: item.id,
          },
        });
      } else {
        this.$router.push({
          name: "goodsdetails",
          query: {
            goods_id: item.id,
          },
        });
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // if (this.$route.params.id) {
    //     console.log(this.$route.params);
    // }
  },
  beforeMount() {}, //生命周期 - 挂载之前
};
</script>
<style lang="less" scope>
::v-deep .el-checkbox {
  font-weight: 400;
  font-size: 16px;
  color: #222222;
}
.el-submenu__title {
  padding: 0 !important;
  font-weight: bold;
  font-size: 18px;
  color: #222222;
}
.cont {
  margin: 0px 105px;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;

  .banner {
    width: 100%;
    height: 290px;

    .banner-img {
      width: 100%;
      height: 100%;
      overflow: hidden;
      object-fit: cover;
    }
  }

  .search {
    width: 50%;
    height: 60px;
    background: #f9f9f9;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
    border-radius: 30px;
    margin: 30px 0px;
    overflow: hidden;
    display: flex;
    align-items: center;

    img {
      width: 25px;
      height: 25px;
      margin-left: 10px;
    }

    input {
      width: 82%;
      height: 100%;
      outline: none;
      border: 0;
      background-color: transparent;
      text-indent: 2em;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
    }

    .btnsearch {
      width: 150px;
      height: 54px;
      background: #ff5757;
      border-radius: 30px;
      // font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 54px;
      border: 0;
      outline: 0;
    }
  }

  .choiceness {
    width: 100%;
    display: flex;

    .nav {
      position: sticky;
      top: 200px;
      width: 15%;

      .one-category {
        font-size: 22px;
        font-weight: bold;
        color: #222222;
        margin: 19px 0;
      }

      .two-category {
        .two-sub-category {
          font-size: 20px;
          font-weight: bold;
          color: #222222;
          margin: 19px 0;
          user-select: none;
        }
      }

      .el-menu-vertical-demo {
        margin-top: 20px;

        .col {
          margin-top: 20px;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          border-color: #222222 !important;
          background-color: #222222 !important;
        }

        .el-checkbox__input.is-focus .el-checkbox__inner {
          border-color: #222222 !important;
        }

        //修改选中后文本的颜色
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #222222 !important;
        }

        .el-checkbox__inner:hover {
          border-color: #222222;
        }
      }
    }

    .navdetails {
      padding: 30px;
      // width: 85%;
      flex: 1;
      display: flex;
      // flex-flow: row wrap;
      justify-content: flex-start;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 50px;

      .item {
        width: 300px;
        height: 572px;
        cursor: pointer;
        display: flex;
        // justify-content: center;
        align-items: center;
        flex-direction: column;

        .cover {
          height: 458px;

          ::v-deep .el-image__inner {
            height: 100% !important;
          }
        }

        p {
          width: 100%;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          color: #222222;
          line-height: 20px;
        }
      }

      .empty {
        width: 100%;
      }
    }
  }
}
</style>
